/**
 * Created by zzy on 2017/9/25.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    FlatList,
    InteractionManager,
    DeviceEventEmitter
} from 'react-native';
import TicketCell from './TicketCell'
import NetRequestLuo from '../util/NetRequest'
import FloatShoppingCart from '../componentluo/floatShoppingCart'
import ClassifyTab from '../componentluo/classifytab'
import shoppingCartStore from '../store/ShoppingCartStore'
import {observer} from 'mobx-react/native'
import {observable, action, computed} from 'mobx'
import CommonTitle from '../componentluo/CommonTitle'
const shopId=1;
@observer
export default class TiketList extends Component{
    static navigationOptions = {
        header: ()=>{
            return  null
        }
    };
    @observable sortType='desc';
    @observable categoryType='saleMount';
    @observable sortSelectIndex=0;
    @observable typeData=[{title:'推荐',sort:false},{title:'销量',sort:false},{title:'价格',sort:true,sortType:true},{title:'品牌',sort:true,sortType:true}];
    constructor(props){
        super(props);
        this.state={
            tiketList:[],
            loading:true
        }
    }
    render(){

        return  (<View style={tiketList_style.container}>
            <CommonTitle title={'水票'} navigation={this.props.navigation}/>
            <ClassifyTab data={this.typeData} {...this.props} sortSelectIndex={this.sortSelectIndex} handler={(index)=>{
                this.tiketList(index);
            }}/>
            <FlatList
                refreshing={this.state.loading}
                onRefresh={this._onRefresh.bind(this)}
                data={this.state.tiketList}
                keyExtractor={(item,index) => index}
                renderItem={({item})=><TicketCell data={item} addShoppingCart={this.addShoppingCart.bind(this)} callback={()=>{
                    this.props.navigation.navigate('TicketDetails',{productItemId:item.productItemModels[0].productItemId,shopId:shopId});
                }}/>}
            />
            <FloatShoppingCart ref='floatShop' callback={()=>{this.props.navigation.navigate('ShoppingCart')}}/>
        </View>)
    }
    _onRefresh(){
        this.tiketList();
    }
    addShoppingCart(item,selectModel){
        this.refs.floatShop.animateShoppingCart();
        let param={
            productItemId: item.productItemModels[selectModel].productItemId,
            productType: item.type,
            shopId: shopId,
        };
        NetRequestLuo.addShoppingCart(param,'increase').then((data)=>{
            LOG('加入购物车--------'+JSON.stringify(data));
            shoppingCartStore.getShoppingCart();
            DeviceEventEmitter.emit('refreshShopList');//刷新购物车
        })
    }
    tiketList(index=0){
        this.sortSelectIndex=index;
        switch (index){
            case 0:
                this.sortType='desc';
                this.categoryType='saleMount';
                break;
            case 1:
                this.sortType='desc';
                this.categoryType='saleMount';
                break;
            case 2:
                this.typeData[index].sortType==true?this.sortType='desc':this.sortType='asc';
                this.categoryType='price';
                this.typeData[index].sortType=!this.typeData[index].sortType;
                break;
            case 3:
                this.typeData[index].sortType==true?this.sortType='desc':this.sortType='asc';
                this.categoryType='saleMount';
                this.typeData[index].sortType=!this.typeData[index].sortType;
                break;
        }
        let param={
            shopId:shopId,
            sortType:this.sortType,
            categoryType:this.categoryType
        };
        InteractionManager.runAfterInteractions(()=> {
            NetRequestLuo.waterTicketProductList(param).then((data)=>{
                LOG('水票列表----------'+JSON.stringify(data));
                this.setState({
                    tiketList: data.productList,
                    loading:false
                })
            })
        })
    }
    componentDidMount(){
        this.tiketList();
    }
}

const tiketList_style=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#f5f5f5'
    }
})